<template>
  <!-- 用户分析 -->
  <div class="UserAnalysis">
    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
      <el-tab-pane label="用户活跃" name="1">
        <el-row :gutter="20">
          <el-col :span="6">
            <el-card class="card">
              <div class="titel">
                <div class="left">
                  <div class="iconborder">
                    <i class="el-icon-user-solid"></i>
                  </div>
                  <span class="text"> 日活跃用户数 </span>
                </div>
                <div class="right">
                  <p class="num">2518</p>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="环比"
                    placement="bottom"
                  >
                    <p class="up"><i class="el-icon-caret-top"></i> 30%</p>
                  </el-tooltip>
                </div>
              </div>
              <!-- <hr />
              <h3>2020-9-15</h3> -->
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card">
              <div class="titel">
                <div class="left">
                  <div class="iconborder">
                    <i class="el-icon-time"></i>
                  </div>
                  <span class="text"> 日活跃时长 </span>
                </div>
                <div class="right">
                  <p class="num">2518</p>
                  <el-tooltip
                    class="item"
                    effect="dark"
                    content="环比"
                    placement="bottom"
                  >
                    <!-- <p class="up"><i class="el-icon-caret-top"></i> 300</p> -->
                    <p class="down"><i class="el-icon-caret-bottom"></i> 30%</p>
                  </el-tooltip>
                </div>
              </div>
              <!-- <hr />
              <h3>2020-9-15</h3> -->
            </el-card>
          </el-col>
        </el-row>
        <el-card class="tableCard">
          <div class="head">
            <div class="titel">用户小时活跃人数表</div>
            <div class="search">
              <span class="txt">性别：</span>
              <el-select
                class="sexselect"
                v-model="sex"
                placeholder="请选择性别"
                size="small"
              >
                <el-option
                  v-for="item in sexOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span class="txt">渠道：</span>
              <el-select
                class="channelselect"
                v-model="channel"
                placeholder="请选择渠道"
                size="small"
              >
                <el-option
                  v-for="item in channelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span class="txt" style="margin-left: 10px">时间：</span>
              <el-date-picker
                v-model="time"
                align="right"
                type="date"
                class="time"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                size="small"
                :picker-options="pickerOptions"
              >
              </el-date-picker>
              <!-- <el-date-picker
                size="small"
                v-model="timeArrA"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="timeOptions"
                value-format="yyyy-MM-dd"
                @change="focusB"
              >
              </el-date-picker> -->
              <el-button class="btn" icon="el-icon-search" size="small"
                >查询搜索</el-button
              >
              <el-button icon="el-icon-paperclip" size="small"
                >导出EXCEL</el-button
              >
            </div>
          </div>
          <div class="chart">
            <div id="echarts" style="width: 100%; height: 100%"></div>
          </div>
        </el-card>
        <el-card class="tableCard">
          <div class="head">
            <div class="titel">用户日活跃时长表</div>
            <div class="search">
              <span class="txt">性别：</span>
              <el-select
                class="sexselect"
                v-model="sex1"
                placeholder="请选择性别"
                size="small"
              >
                <el-option
                  v-for="item in sexOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span class="txt">渠道：</span>
              <el-select
                class="channelselect"
                v-model="channel1"
                placeholder="请选择渠道"
                size="small"
              >
                <el-option
                  v-for="item in channelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span class="txt" style="margin-left: 10px">时间：</span>
              <!-- <el-date-picker
                v-model="time"
                align="right"
                type="date"
                class="time"
                placeholder="选择日期"
                value-format="yyyy-MM-dd"
                size="small"
                :picker-options="pickerOptions"
              >
              </el-date-picker> -->
              <el-date-picker
                size="small"
                v-model="timeArrA"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="timeOptions"
                value-format="yyyy-MM-dd"
                @change="focusB"
              >
              </el-date-picker>
              <el-button class="btn" icon="el-icon-search" size="small"
                >查询搜索</el-button
              >
              <el-button icon="el-icon-paperclip" size="small"
                >导出EXCEL</el-button
              >
            </div>
          </div>
          <div class="chart">
            <div id="echartsB" style="width: 100%; height: 100%"></div>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="用户存留" name="2">
        <el-card>
          <div class="searchBox">
            <div class="left">
              <el-radio-group v-model="type" size="small" fill="#7b94d8">
                <el-radio-button label="1">存留率</el-radio-button>
                <el-radio-button label="2">存留人数</el-radio-button>
              </el-radio-group>
              <span class="txt">渠道：</span>
              <el-select
                class="channelselect"
                v-model="channelA"
                placeholder="请选择渠道"
                size="small"
              >
                <el-option
                  v-for="item in channelOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
              <span class="txt">时间：</span>
              <el-date-picker
                size="small"
                v-model="timeArr"
                type="daterange"
                align="right"
                unlink-panels
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                :picker-options="timeOptions"
                value-format="yyyy-MM-dd"
                @change="focusA"
              >
              </el-date-picker>
              <el-button class="btn" icon="el-icon-search" size="small"
                >查询搜索</el-button
              >
            </div>
            <div class="right">
              <el-button icon="el-icon-paperclip" size="small"
                >导出EXCEL</el-button
              >
            </div>
          </div>
          <el-table
            :data="tableData"
            style="width: 100%; margin-top: 10px"
            :header-cell-style="{ background: '#f5f7fa' }"
          >
            <template slot="empty">
              <el-empty :image-size="200"></el-empty>
            </template>
            <el-table-column prop="date" label="时间"> </el-table-column>
            <el-table-column prop="name" label="新增"> </el-table-column>
            <el-table-column prop="address" label="次日"> </el-table-column>
            <el-table-column prop="address" label="3日"> </el-table-column>
            <el-table-column prop="address" label="4日"> </el-table-column>
            <el-table-column prop="address" label="5日"> </el-table-column>
            <el-table-column prop="address" label="6日"> </el-table-column>
            <el-table-column prop="address" label="7日"> </el-table-column>
            <el-table-column prop="address" label="15日"> </el-table-column>
            <el-table-column prop="address" label="30日"> </el-table-column>
          </el-table>
          <pagination
            :total="total"
            :page.sync="page"
            :limit.sync="pageSize"
            @pagination="getList"
          />
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="在线详情" name="3">
        <div class="searchBox">
          <div class="left">
            <el-radio-group v-model="type1" size="small" fill="#7b94d8">
              <el-radio-button label="">
                <span class="label">不限</span>
              </el-radio-button>
              <el-radio-button label="1"
                ><span class="label">男</span></el-radio-button
              >
              <el-radio-button label="2"
                ><span class="label">女</span></el-radio-button
              >
            </el-radio-group>
          </div>
          <div>
            <el-button icon="el-icon-paperclip" size="small"
              >导出EXCEL</el-button
            >
          </div>
        </div>
        <el-row :gutter="20" style="margin-top: 20px">
          <el-col :span="6">
            <el-card class="card">
              <div class="titel">
                <div class="left">
                  <div class="iconborder">
                    <i class="el-icon-user-solid"></i>
                  </div>
                  <span class="text"> 今日在线最高人数 </span>
                </div>
                <div class="right">
                  <p class="num">2518</p>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card">
              <div class="titel">
                <div class="left">
                  <div class="iconborder">
                    <i class="el-icon-data-analysis"></i>
                  </div>
                  <span class="text"> 今日平均在线数 </span>
                </div>
                <div class="right">
                  <p class="num">2518</p>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card">
              <div class="titel">
                <div class="left">
                  <div class="iconborder">
                    <i class="el-icon-user-solid"></i>
                  </div>
                  <span class="text"> 七日在线最高人数 </span>
                </div>
                <div class="right">
                  <p class="num">2518</p>
                </div>
              </div>
            </el-card>
          </el-col>
          <el-col :span="6">
            <el-card class="card">
              <div class="titel">
                <div class="left">
                  <div class="iconborder">
                    <i class="el-icon-data-analysis"></i>
                  </div>
                  <span class="text"> 七日平均在线数 </span>
                </div>
                <div class="right">
                  <p class="num">2518</p>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        <el-card style="margin-top: 20px">
          <div class="chart">
            <div id="echartsA" style="width: 100%; height: 100%"></div>
          </div>
        </el-card>
      </el-tab-pane>
      <el-tab-pane label="用户画像" name="4">
        <div class="userPoint">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-card style="margin-bottom: 20px">
                <div class="chartC">
                  <div id="echartsC" style="width: 100%; height: 100%"></div>
                </div>
              </el-card>
              <el-card>
                <div class="chartD">
                  <div id="echartsD" style="width: 100%; height: 100%"></div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card>
                <div class="searchBox">
                  <div class="left">
                    <el-radio-group v-model="type2" size="small" fill="#7b94d8">
                      <el-radio-button label="1">省</el-radio-button>
                      <el-radio-button label="2">市区</el-radio-button>
                    </el-radio-group>
                  </div>
                  <div class="right">
                    <el-button size="small" icon="el-icon-d-caret"></el-button>
                    <el-button
                      size="small"
                      icon="el-icon-caret-top"
                    ></el-button>
                    <el-button
                      size="small"
                      icon="el-icon-caret-bottom"
                    ></el-button>
                  </div>
                </div>
                <div class="chartE">
                  <div id="echartsE" style="width: 100%; height: 100%"></div>
                </div>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
export default {
  components: { Pagination },
  data() {
    return {
      activeName: "1",
      sex: "",
      sex1: "",
      sexOptions: [
        {
          value: "",
          label: "不限",
        },
        {
          value: "1",
          label: "男",
        },
        {
          value: "2",
          label: "女",
        },
      ],
      channel: "",
      channel1: "",
      channelOptions: [],
      time: "",
      timeArrA: [],
      startTime: "",
      endTime: "",
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              picker.$emit("pick", new Date());
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", date);
            },
          },
          {
            text: "一周前",
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", date);
            },
          },
        ],
      },
      myChart: null,
      myChartB: null,
      //用户存留
      type: "1",
      channelA: "",
      timeArr: [],
      startDate: "",
      endDate: "",
      tableData: [],
      total: 0,
      page: 1,
      pageSize: 10,
      timeOptions: {
        disabledDate(platformValue) {
          return platformValue.getTime() > Date.now() - 8.64e6;
        },
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 6);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      //在线详情
      type1: "",
      myChartA: null,
      // 用户画像
      type2: "1",
      myChartC: null,
      myChartD: null,
      myChartE: null,
    };
  },
  methods: {
    handleClick() {},
    //初始化Echarts
    echartsInit() {
      this.myChart = this.$echarts.init(document.getElementById("echarts"));
      this.myChartA = this.$echarts.init(document.getElementById("echartsA"));
      //   this.myChartA = this.$echarts.init(document.getElementById("echartsA"));
      //   this.myChartB = this.$echarts.init(document.getElementById("echartsB"));
      //   this.myChartC = this.$echarts.init(document.getElementById("echartsC"));
      //   this.myChartD = this.$echarts.init(document.getElementById("echartsD"));
      //   this.myChartE = this.$echarts.init(document.getElementById("echartsE"));
    },
    //配置Echarts
    setMyChart() {
      console.log("set");
      var colors = ["#7b94d8", "#91CC75", "#EE6666"];
      this.myChart.setOption({
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          right: "20%",
        },
        legend: {
          data: ["金额", "人数"],
        },
        xAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: [
          {
            type: "value",
            name: "金额",
            min: 0,
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "人数",
            min: 0,
            position: "right",
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        series: [
          //   {
          //     name: "金额",
          //     type: "line",
          //     barWidth: 30,
          //     data: [10],
          //   },
          //   {
          //     name: "人数",
          //     type: "line",
          //     yAxisIndex: 1,
          //     barWidth: 30,
          //     data: [20],
          //   },
          {
            name: "金额",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
          {
            name: "人数",
            data: [82, 93, 91, 934, 120, 130, 120],
            yAxisIndex: 1,
            type: "line",
            smooth: true,
          },
        ],
      });
    },
    setMyChartB() {
      console.log("setB");
      var colors = ["#7b94d8", "#91CC75", "#EE6666"];
      this.myChartB.setOption({
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          right: "20%",
        },
        legend: {
          data: ["金额", "人数"],
        },
        xAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: [
          {
            type: "value",
            name: "金额",
            min: 0,
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "人数",
            min: 0,
            position: "right",
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        series: [
          //   {
          //     name: "金额",
          //     type: "line",
          //     barWidth: 30,
          //     data: [10],
          //   },
          //   {
          //     name: "人数",
          //     type: "line",
          //     yAxisIndex: 1,
          //     barWidth: 30,
          //     data: [20],
          //   },
          {
            name: "金额",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
          {
            name: "人数",
            data: [82, 93, 91, 934, 120, 130, 120],
            yAxisIndex: 1,
            type: "line",
            smooth: true,
          },
        ],
      });
    },
    setMyChartA() {
      console.log("setA");
      var colors = ["#7b94d8", "#91CC75", "#EE6666"];
      this.myChartA.setOption({
        color: colors,
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
          },
        },
        grid: {
          right: "20%",
        },
        legend: {
          data: ["金额", "人数"],
        },
        xAxis: {
          type: "category",
          axisTick: {
            alignWithLabel: true,
          },
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: [
          {
            type: "value",
            name: "金额",
            min: 0,
            position: "right",
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[0],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
          {
            type: "value",
            name: "人数",
            min: 0,
            position: "right",
            offset: 80,
            axisLine: {
              show: true,
              lineStyle: {
                color: colors[1],
              },
            },
            axisLabel: {
              formatter: "{value} ",
            },
          },
        ],
        series: [
          //   {
          //     name: "金额",
          //     type: "line",
          //     barWidth: 30,
          //     data: [10],
          //   },
          //   {
          //     name: "人数",
          //     type: "line",
          //     yAxisIndex: 1,
          //     barWidth: 30,
          //     data: [20],
          //   },
          {
            name: "金额",
            data: [820, 932, 901, 934, 1290, 1330, 1320],
            type: "line",
            smooth: true,
          },
          {
            name: "人数",
            data: [82, 93, 91, 934, 120, 130, 120],
            yAxisIndex: 1,
            type: "line",
            smooth: true,
          },
        ],
      });
    },
    setMyChartC() {
      console.log("setC");
      var colors = ["#7b94d8", "#91CC75", "#ccc"];
      this.myChartC.setOption({
        color: colors,
        title: {
          text: "主播性别分布",
          left: "left",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          left: "left",
          padding: [40, 0, 0, 0],
        },
        series: [
          {
            name: "性别分布",
            type: "pie",
            radius: "50%",
            data: [
              { value: 1048, name: "男" },
              { value: 735, name: "女" },
              { value: 580, name: "其他" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      });
    },
    setMyChartD() {
      console.log("set");
      var colors = ["#7b94d8", "#91CC75", "#EE6666"];
      this.myChartD.setOption({
        color: colors,
        title: {
          text: "年龄分布",
          left: "left",
        },
        xAxis: {
          type: "category",
          data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            data: [120, 200, 150, 80, 70, 110, 130],
            type: "bar",
          },
        ],
      });
    },
    setMyChartE() {
      let yLabel = [
        "幼儿园",
        "小一",
        "小二",
        "小三",
        "小四",
        "小五",
        "小六",
        "初一",
        "初二",
        "初三",
        "高一",
        "高二",
        "高三",
        "高三",
        "高三",
      ];
      let yData = [
        65.3, 75.5, 70.5, 65.5, 67.5, 65.4, 80.2, 76.9, 51.3, 75.5, 75.5, 15.1,
        72.6, 72.6, 72.6,
      ];
      let bgData = [];
      for (let i in yData) {
        bgData.push(100);
      }
      this.myChartE.setOption({
        grid: {
          left: "5%",
          right: "5%",
          // bottom: "5%",
          // top: "10%",
          containLabel: true,
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "none",
          },
          formatter: function (params) {
            return (
              params[0].name +
              "<br/>" +
              "<span style='display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:rgba(36,207,233,0.9)'></span>" +
              params[0].seriesName +
              " : " +
              params[0].value +
              " <br/>"
            );
          },
        },

        xAxis: {
          show: false,
          type: "value",
        },
        yAxis: [
          {
            type: "category",
            inverse: true,
            axisLabel: {
              show: true,
              margin: 15,
              textStyle: {
                color: "#87a2ed",
              },
            },
            splitLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            data: yLabel,
          },
          {
            type: "category",
            inverse: true,
            axisTick: "none",
            axisLine: "none",
            show: true,
            axisLabel: {
              textStyle: {
                color: "#87a2ed",
                fontSize: "12",
              },
              formatter: "{value}%",
            },
            data: yData,
          },
        ],
        series: [
          {
            name: "人数",
            type: "bar",
            zlevel: 1,
            itemStyle: {
              normal: {
                barBorderRadius: [30, 30, 30, 30],
                color: "#87a2ed",
                // new echarts.graphic.LinearGradient(0, 0, 1, 0, [
                //   {
                //     offset: 0,
                //     color: "#52d8da",
                //   },
                //   {
                //     offset: 1,
                //     color: "#57dcde",
                //   },
                // ])
                shadowBlur: 0,
                shadowColor: "rgba(87,220,222,0.7)",
              },
            },
            barWidth: 20,
            data: yData,
          },
          {
            name: "背景",
            type: "bar",
            barWidth: 20,
            barGap: "-100%",
            data: bgData,
            itemStyle: {
              normal: {
                color: "rgba(24,31,68,1)",
                barBorderRadius: [30, 30, 30, 30],
              },
            },
          },
        ],
        dataZoom: [
          //滑动条
          {
            yAxisIndex: [0, 1], //这里是从X轴的0刻度开始
            show: true, //是否显示滑动条，不影响使用
            type: "slider", // 这个 dataZoom 组件是 slider 型 dataZoom 组件
            startValue: 0, // 从头开始。
            endValue: 6, // 一次性展示6个。
          },
        ],
      });
    },
    //用户存留
    //选着时间
    focusA(time) {
      if (!this.timeArr) {
        this.timeArr = [];
      }
      this.startDate = this.timeArr[0];
      this.endDate = this.timeArr[1];
    },
    focusB() {
      if (!this.timeArrA) {
        this.timeArrA = [];
      }
      this.startTime = this.timeArrA[0];
      this.endTime = this.timeArrA[1];
    },
    getList() {},
    //基于标签发送请求
    getData() {
      switch (this.activeName) {
        case "1":
          //用户活跃
          if (!this.myChart) {
            this.myChart = this.$echarts.init(
              document.getElementById("echarts")
            );
            this.myChartB = this.$echarts.init(
              document.getElementById("echartsB")
            );
          }
          this.setMyChart();
          this.setMyChartB();
          break;
        case "2":
          //用户存留
          // this.setMyChart();
          break;
        case "3":
          //在线详情
          this.$nextTick(() => {
            if (!this.myChartA) {
              this.myChartA = this.$echarts.init(
                document.getElementById("echartsA")
              );
            }
            this.setMyChartA();
          });
          break;
        case "4":
          //用户画像
          this.$nextTick(() => {
            if (!this.myChartC) {
              this.myChartC = this.$echarts.init(
                document.getElementById("echartsC")
              );
              this.myChartD = this.$echarts.init(
                document.getElementById("echartsD")
              );
              this.myChartE = this.$echarts.init(
                document.getElementById("echartsE")
              );
            }
            this.setMyChartC();
            this.setMyChartD();
            this.setMyChartE();
          });
          break;
      }
    },
  },
  mounted() {
    this.getData();
    // this.echartsInit();
    // this.setMyChart();
    // this.setMyChartA();
  },
  watch: {
    activeName() {
      this.getData();
    },
  },
};
</script>

<style lang="less" scoped>
.UserAnalysis {
  padding: 20px;
  .card {
    .titel {
      display: flex;
      justify-content: space-between;
      align-items: center;
      .left {
        .iconborder {
          border: 5px solid #ccd4fe;
          border-radius: 50%;
          display: inline-block;
          i {
            border: 10px solid #7b94d8;
            border-radius: 50%;
            padding: 5px;
            color: #7b94d8;
          }
        }
        .text {
          margin-left: 10px;
          font-weight: 700;
          color: #7b94d8;
          font-size: 18px;
        }
      }
      .right {
        .num {
          font-size: 24px;
          font-weight: 800;
          color: #7e84a4;
        }
        p {
          text-align: right;
          margin: 10px 0;
          font-weight: 600;
        }
        .up {
          color: #41c49a;
        }
        .down {
          color: #fc512d;
        }
      }
    }
    hr {
      border: none;
      border-top: 1px solid #7b94d8;
    }
    h3 {
      margin: 0;
      color: #7b94d8;
    }
  }
  .tableCard {
    margin-top: 20px;
    .head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 10px;
      .titel {
        font-weight: 700;
        font-size: 20px;
      }
      .search {
        display: flex;
        align-items: center;
      }
      .txt {
        display: inline-block;
        height: 32px;
        background-color: #f5f7fa;
        line-height: 32px;
        padding-left: 10px;
        color: #9d9399;
        border-radius: 4px 0 0 4px;
        border: 1px solid #dcdfe6;
        border-right: none;
      }
      /deep/ .el-input__inner {
        border-radius: 0 4px 4px 0 !important;
      }
      .sexselect {
        width: 100px;
        margin: 0 10px 0 0;
      }
    }
    .chart {
      width: 100%;
      height: 500px;
    }
  }
  .searchBox {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .left {
      display: flex;
      align-items: center;
    }
    .txt {
      display: inline-block;
      height: 32px;
      background-color: #f5f7fa;
      line-height: 32px;
      padding-left: 10px;
      color: #9d9399;
      border-radius: 4px 0 0 4px;
      border: 1px solid #dcdfe6;
      border-right: none;
      margin-left: 10px;
    }
    /deep/ .el-input__inner {
      border-radius: 0 4px 4px 0 !important;
    }
    .sexselect {
      width: 100px;
      margin: 0 10px 0 0;
    }
    .label {
      display: inline-block;
      width: 50px;
      text-align: center;
    }
  }
  .chart {
    width: 100%;
    height: 500px;
  }
  .userPoint {
    .chartC {
      height: 350px;
    }
    .chartD {
      height: 350px;
    }
    .chartE {
      height: 727px;
    }
  }
}
</style>